<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  	<title>常见问题frm</title>
  	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  	<link rel="stylesheet" type="text/css" href="../../css/common.css">
    <style>
        .aui-list{background-image: none;}
        .aui-list .aui-list-item{min-height:1.2rem;}
        .aui-list.aui-list-in .aui-list-item{background-position:0rem bottom;padding-left:0.5rem;
          background-image: linear-gradient(0,#ededed,#ededed 50%,transparent 50%);
          background-image: -webkit-linear-gradient(90deg,#ededed,#ededed 50%,transparent 50%);display: block;}
        .aui-list .aui-list-item-inner{min-height:1.2rem;max-height:1.2rem;height:1.2rem;}
        .aui-list-item-inner.aui-list-item-arrow{padding-right: 1rem;}
        .aui-list-item-arrow:before{right: 0.5rem;width: 0.3rem;height: 0.3rem;margin-top: -0.15rem;}
        .aui-list .aui-list-item-title{ overflow:hidden;text-overflow:ellipsis;white-space: nowrap;}
        /*箭头修改*/
        .aui-list-item-arrowdown:before{right: 0.5rem;width: 0.3rem;height: 0.3rem;margin-top:-0.3rem;
          content: '';position: absolute;top: 50%;background: transparent;border: 1px solid #dddddd;
          border-top: none;border-right: none;z-index: 2;-webkit-border-radius: 0;border-radius: 0;
          -webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
        .itemMsgBox{display:none;padding:0.1rem 0.2rem 0.2rem 0;}
        .itemMsgBox p{font-size:0.373rem};
    </style>
</head>
<body id="warp">
    <div class="aui-content aui-margin-b-15" id="app">
        <ul class="aui-list aui-list-in" v-cloak>
            <li class="aui-list-item aui-list-item-middle" v-for="(item,index) in data">
                <div class="aui-list-item-inner aui-list-item-arrow"  @click="showItemFun(index)">
                    <div class="aui-list-item-title sg-text-size32 sg-color-font2">{{index + 1}}、{{item.question}}</div>
                </div>
                <div class="itemMsgBox sg-text-size28 sg-color-font2" v-html="item.answer">
                    {{item.answer}}
                </div>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
(function (doc, win) {
  	var docEl = doc.documentElement,
  	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  	recalc = function () {
    		var clientWidth = docEl.clientWidth;
    		if (!clientWidth) return;
    		docEl.style.setProperty('font-size',(clientWidth / 10) + 'px','important');
  	};
  	if(!doc.addEventListener){
        return
    };
  	win.addEventListener(resizeEvt, recalc, false);
  	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
var app;
apiready = function () {
		//解析元素 tapmode 属性，优化点击事件处理 - 第四步
		api.parseTapmode();
    // 初始化数据
    initializeData();
    if(api.pageParam.questionName){
        // 获取常见问题数据
        loadDataSearchFun()
    }else {
        // 获取常见问题数据
        loadDataFun()
    }
}

// 初始化数据
function initializeData(){
    app = new Vue({
        el: '#app',
        data: {
            page: 1, //当前页数
            pageNum: 10, //每页行数
            whetherToLoading: false, //页面是否在加载中
            data: [], //数据对象
            pullLoad: '正在加载中...'
        }
    });
}

// 问题搜索
function loadDataSearchFun(){
    console.log(api.pageParam.questionName);
    $api.ajax({
        url: "api/faq/list",
        method: 'get',
        data: {
            values: {
                question:api.pageParam.questionName,
                page: app.page,
                offset: app.pageNum
            }
        },
    }, function (ret,err){
        console.log(JSON.stringify(ret));
        if(ret){
            if (app.page == 1) {
                app.data = ret.data.list;
            } else {
                app.data = app.data.concat(ret.data.list);
            }
        }else {
            api.toast({
                msg: '网络错误,请稍后重试',
                duration: 1000,
                location: 'middle'
            });
        }
    })
}

// 常见问题数据
function loadDataFun(){
    $api.ajax({
        url: "api/faq/list",
        method: 'get',
        data: {
            values: {
                type_id: api.pageParam.typeId,
                page: app.page,
                offset: app.pageNum
            }
        },
    }, function (ret,err){
        if(ret){
            if (app.page == 1) {
                app.data = ret.data.list;
            } else {
                app.data = app.data.concat(ret.data.list);
            }
        }else {
            api.toast({
                msg: '网络错误,请稍后重试',
                duration: 1000,
                location: 'middle'
            });
        }
    })
}

// 展示当前对应显示的项目，并隐藏之前展示的项目
function showItemFun(index){
    var domStatus = document.getElementsByClassName("itemMsgBox")[index];
    if($api.cssVal(domStatus,'display') == 'none'){
        // 显示当前项内容
        $api.css(domStatus,'display:block;');
        //箭头样式
        document.querySelectorAll(".itemMsgBox")[index].parentNode.firstElementChild.className = 'aui-list-item-inner aui-list-item-arrowdown'
    }else{
        // 隱藏当前项内容
        $api.css(domStatus,'display:none;');
        // 箭头样式
        document.querySelectorAll(".itemMsgBox")[index].parentNode.firstElementChild.className = 'aui-list-item-inner aui-list-item-arrow'
    }
}
</script>
</html>
